<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG Clock</title>
        <style>
            #root {
                margin:auto;
                max-width:600px;
                width:100%;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <h1>Clock Worker Example</h1>
            <p>
            In this example the hands of the clock are managed by a single web-worker.
            </p>

            <button onclick="cotonic.broker.publish('spawn');">Spawn Worker</button>
            <button onclick="cotonic.broker.publish('stop');">Stop Worker</button>

          <!-- The svg can be placed as is.  -->
          <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g transform="translate(150,150)">
                <g>
                    <circle fill="none" r="108" stroke="gray" stroke-width="4"></circle>
                    <circle fill="none" r="97" stroke="black" stroke-dasharray="4, 46.789082" stroke-width="11" transform="rotate(-1.5)"></circle>
                    <circle fill="none" r="100" stroke="black" stroke-dasharray="2, 8.471976" stroke-width="5" transform="rotate(-.873)"></circle>
                </g>
                <g id="hands" transform="rotate(180)">
                    <g id="hour"></g>
                    <g id="minute"></g>
                    <g id="second"></g>
                </g>
            </g>
          </svg>
        </div>

        <script type="text/javascript" src="/cotonic.js"
                data-base-worker-src="/cotonic-worker.js"></script>

        <script>
            function main() {
                let hands_worker = null;

                cotonic.broker.subscribe("spawn",
                    function() {
                        if(!hands_worker) {
                            hands_worker = cotonic.spawn("/examples/clock_worker.js");
                        }
                    })

                cotonic.broker.subscribe("stop", function() {
                    if(hands_worker) {
                        cotonic.exit(hands_worker);
                        hands_worker = null;
                    }
                })
            }

            if(window.cotonic) {
                main();
            } else {
                window.addEventListener("cotonic-ready", main)
            }
        </script>
    </body>
</html>
